<template>
	<view class="i-information" :style="[viewStyle]">
		<view class="overflow-hidd" :style="[bodyBoxStyle]">
			<template v-if="option.titleShow">
				<view class="e-p-l-30 e-p-r-30 e-p-t-20 e-p-b-20">
					<text class="fw-500 e-font-35" :style="[{ color: option.titleColor }]">{{ option.titleText }}</text>
				</view>
				<e-line :color="option.titleLineColor"></e-line>
			</template>
			<scroll-view class="white-nowrap" :style="[scrollStyle]" scroll-x="true" v-if="option.classifyType !== 3">
				<view class="e-flex e-p-l-30">
					<view
						class="i-information__classify e-flex-xy-center"
						:class="[index === classifyIndex && 'is-active fw-500']"
						v-for="(item, index) in classifyList"
						:key="item.id"
						@tap="handleClassifyIndexChange(index)"
					>
						<text class="white-nowrap">{{ item.name }}</text>
					</view>
					<view class="img-30 e-p-r-5"></view>
				</view>
			</scroll-view>
			<view class="e-p-l-30  e-p-r-30" :class="[option.layoutType === 4 && 'e-flex e-flex-items-start e-flex-wrap',option.classifyType !== 3 ? '' : 'e-p-t-30' ]">
				<template v-if="option.layoutType === 2">
					<view @tap="$goTo('/pages/information/info',{id:item.id})" v-for="(item, index) in list" :key="item.id">
						<information-item
							:info="item"
							:option="itemOption"
							:imgStyle="imgStyle"
							:top="index  % 4 === 0"
						></information-item>
					</view>
				</template>
				<template v-else>
					<view class="i-information__item e-m-b-20" @tap="$goTo('/pages/information/info',{id:item.id})" v-for="item in list" :key="item.id">
						<image mode="widthFix" :src="$fullLink(getImage(item.thumbnailPic)[0])" class="e-m-b-30" :style="imgStyle" style="width: 100%" />
						<view class="e-line-2 e-m-b-10 e-line-h-42" style="height: 80rpx" v-if="option.itemTitleShow">
							<text class="e-font-30 w-500" :style="[{ color: option.itemTitleColor }]">{{ item.title }}</text>
						</view>
						<view class="e-flex e-flex-between">
							<text class="e-font-24 c-secondary e-p-r-16">{{ $timeFormat(item.date, 'yyyy-mm-dd') }}</text>
							<text class="e-font-24" :style="[{ color: option.readingColor }]" v-if="option.readingShow">{{ item.views || 0 }}{{ $t('layout.阅读') }}</text>
						</view>
					</view>
					
				</template>
			</view>
			<load-more v-if="option.reachBottom" :showLoad="showLoad"></load-more>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { ref, computed, inject, onMounted } from 'vue';
import { useLayoutCompoments } from './hooks';
import { useCurrentInstance, useQueryPage } from '@/common/hooks';
import { px2rpx } from './utils';
import type { InformationClassify } from '@/common/request/api';
import { getInformationClassifyList, getInformationList } from '@/common/request/api';
import InformationItem from './child/informationItem.vue';
import { homePageContextKey, userPageContextKey, layoutPageContextKey } from '@/token';
const emit = defineEmits(['pageBackgroundImageChange']);

const props = withDefaults(
	defineProps<{
		option: {
			titleText: string; //标题
			layoutType: 2 | 4; //风格类型 2、样式一 4、样式二
			titleShow: boolean; //标题是否显示
			titleColor: string; //标题字体颜色
			titleLineColor: string; //标题下方分割线颜色
			dateType: 1 | 2 | 3; //资讯数据类型 1、站内资讯 2、站外资讯 3、站内站外同时使用
			reachBottom: false; //触底加载更多，一个页面仅会有一个组件开启此属性
			classifyType: 1 | 2 | 3; //分类列表数据展示方式 1、获取全部分类展示 2、展示添加的分类 3、隐藏分类列表
			classifyList: InformationClassify[]; //添加的分类列表，仅在classifyType为2时生效
			activeTextColor: string; //选中分类字体颜色
			inactiveColor: string; //未选中分类字体颜色
			itemTitleShow: boolean; //资讯标题是否显示
			itemTitleColor: string; //资讯标题字体颜色
			sourceShow: boolean; //资讯来源是否显示
			sourceColor: string; //资讯来源字体颜色
			readingShow: boolean; //阅读数量是否显示
			readingColor: string; //阅读数量字体颜色
			backgroundColor?: string; //底部背景
			bodyBackgroundColor: string; //组件背景
			paddingTop: number; //上边距
			paddingBottom: number; //下边距
			paddingX: number; //左右边距
			radiusTop: number; //组件上圆角
			radiusBottom: number; //组件下圆角
			imgRadiusTop: number; //图片上圆角
			imgRadiusBottom: number; //图片下圆角
		};
	}>(),
	{
		option: () => ({
			titleText: '资讯中心',
			layoutType: 2,
			titleShow: true,
			titleColor: 'rgba(53, 53, 53, 1)',
			titleLineColor: 'rgba(247, 247, 247, 1)',
			dateType: 1,
			reachBottom: false,
			classifyType: 1,
			classifyList: [],
			activeTextColor: 'rgba(51, 51, 51, 1)',
			inactiveColor: 'rgba(102, 102, 102, 1)',
			itemTitleShow: true,
			itemTitleColor: 'rgba(53, 53, 53, 1)',
			sourceShow: true,
			sourceColor: 'rgba(153, 153, 153, 1)',
			readingShow: true,
			readingColor: 'rgba(153, 153, 153, 1)',
			backgroundColor: null,
			bodyBackgroundColor: 'rgba(255, 255, 255, 1)',
			paddingTop: 0,
			paddingBottom: 0,
			paddingX: 0,
			radiusTop: 0,
			radiusBottom: 0,
			imgRadiusTop: 0,
			imgRadiusBottom: 0
		})
	}
);

const ctx = useCurrentInstance();

const { viewStyle, bodyBoxStyle, jumpLink } = useLayoutCompoments(ctx, props.option);

const itemOption = computed(() => {
	return {
		itemTitleShow: props.option.itemTitleShow,
		itemTitleColor: props.option.itemTitleColor,
		sourceShow: props.option.sourceShow,
		sourceColor: props.option.sourceColor,
		readingShow: props.option.readingShow,
		readingColor: props.option.readingColor
	};
});

const scrollStyle = computed(() => {
	return {
		'--color': props.option.inactiveColor,
		'--active-color': props.option.activeTextColor
	};
});
const classifyIndex = ref(0);
const allClassifyList = ref<InformationClassify[]>([]);
const classifyList = computed(() => {
	return props.option.classifyType === 2 ? props.option.classifyList : allClassifyList.value;
});

const getData = (params: Parameters<typeof getInformationList>[0]) => getInformationList({...params,categoryId:classifyList.value[classifyIndex.value]?.id});

const { showLoad, list, handleQueryPage, handleRefresh } = useQueryPage({
	api: getData,
	option: {
		params: {
			type: props.option.dateType === 3 ? null : props.option.dateType
		},
		responseKey:'data.rows',
		totalKey:'data.total',
	},
	pageSize:4
});
const handleClassifyIndexChange = (index: number) => {
	classifyIndex.value = index;
	handleRefresh();
};

const getImage = (str: string) => str?.split?.(',') || [];

const imgStyle = computed(() => {
	return {
		borderRadius: `${px2rpx(props.option.imgRadiusTop)} ${px2rpx(props.option.imgRadiusTop)}  ${px2rpx(props.option.imgRadiusBottom)} ${px2rpx(props.option.imgRadiusBottom)}`
	};
});

const homePageContext = inject(homePageContextKey);
const userPageContext = inject(userPageContextKey);
const layoutPageContext = inject(layoutPageContextKey);
uni.$on('onHomePageReachBottom', function () {
	// homePageContext有contextId，代表当前组件是在home页面下渲染的，
	// 同时组件需开启hasReachBottom属性，代表可以触底加载更多商品
	if (homePageContext?.contextId && props.option.reachBottom) {
		handleQueryPage();
	}
});
uni.$on('onUserPageReachBottom', function () {
	// userPageContext有contextId，代表当前组件是在user页面下渲染的，
	// 同时组件需开启hasReachBottom属性，代表可以触底加载更多商品
	if (userPageContext?.contextId && props.option.reachBottom) {
		handleQueryPage();
	}
});
uni.$on('onLayoutPageReachBottom', function () {
	// layoutPageContext有contextId，代表当前组件是在layout或preview页面下渲染的，
	// 同时组件需开启hasReachBottom属性，代表可以触底加载更多商品
	if (layoutPageContext?.contextId && props.option.reachBottom) {
		handleQueryPage();
	}
});

onMounted(() => {
	if (props.option.classifyType === 1) {
		getInformationClassifyList({ isPage: false, type: props.option.dateType === 3 ? undefined : props.option.dateType }).then((res) => {
			allClassifyList.value = res.data.rows;
			classifyIndex.value = 0;
			handleRefresh();
		});
	} else {
		handleRefresh();
	}
});
</script>

<style lang="scss">
@import '@/components/list/css/layoutCommon.scss';
</style>
<style lang="scss" scoped>
.i-information {
	&__classify {
		height: 120rpx;
		white-space: nowrap;
		margin-right: 40rpx;
		color: var(--color);

		&:last-child {
			margin-right: 0;
		}
		&.is-active {
			color: var(--active-color);
			position: relative;
			font-size: 30rpx;
			&::after {
				content: '';
				position: absolute;
				bottom: 28rpx;
				left: calc(50% - 24rpx);
				width: 48rpx;
				height: 8rpx;
				background-color: var(--active-color);
			}
		}
	}
	&__item {
		flex: 0 0 50%;
		padding-right: 10rpx;
		&:nth-child(2n) {
			padding-left: 10rpx;
			padding-right: 0;
		}
	}
}
</style>
